<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位广告</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .top{
        width: 100%;
        height: 120px;
        line-height: 120px;
        text-align: center;
        color: #fff;
        font-size: 100px;
        background-color: #5AA4AE;
        position: fixed;
        top: 0;
    }
    .main{
        margin-top: 130px;
    }
    .left,.right{
        height: 450px;
        width: 100px;
        font-size: 80px;
        text-align: center;
        position: fixed;
        top: 300px;
    }
    .left{
        background-color: #fff799;
        left: 20px;
    }
    .right{
        background-color: #f35336;
        right: 20px;
    }
</style>
<body>
    <div class="top">顶部广告</div>
    <div class="left">左侧广告</div>
    <div class="right">右侧广告</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis nulla quasi repellat ullam? A aliquid
            dicta expedita facilis id itaque laborum officiis quo. Atque, dolores ea magnam molestiae optio tempore.
        </div>
        <div>Alias delectus doloribus eos error facere fugiat illum iusto magni neque, nobis quam quia reprehenderit
            vero? Amet beatae error exercitationem ipsa labore minus natus quisquam quos repellat, sint ut voluptate?
        </div>
        <div>Accusamus adipisci ea enim eum facere libero, odio perspiciatis quaerat quia sed! Consequuntur distinctio,
            expedita ipsam itaque iure officiis omnis ratione reiciendis sed sit soluta sunt, suscipit ut, vel
            voluptatum!
        </div>
        <div>Aliquid eos id nobis non placeat? Assumenda consequatur corporis debitis dolor dolorem eius eos
            exercitationem harum illo ipsum, labore, laboriosam minima odit quas quos ratione sint tenetur totam velit
            veniam.
        </div>
        <div>Accusamus aliquam animi, aperiam at blanditiis dignissimos doloremque eius error esse facere fugiat, ipsum
            iste libero minima nam nemo non numquam omnis pariatur perspiciatis rem repellendus soluta temporibus ullam
            ut?
        </div>
        <div>Accusamus architecto assumenda ducimus eligendi est fuga itaque nulla ut, veniam voluptatem! Molestias,
            perferendis, porro! Aliquam et illum laborum magni mollitia natus optio quidem, reprehenderit similique
            suscipit tenetur ut voluptatibus!
        </div>
        <div>A, illum, reprehenderit. Ab cumque earum non, quasi quia quis. Ad aperiam consectetur ea earum, ex
            explicabo harum nihil nostrum obcaecati officiis, quae rem repellendus. Dignissimos eligendi quam quas
            totam?
        </div>
        <div>Animi consequatur cum deserunt dolores eligendi, error expedita id iste itaque labore minima molestias
            neque nesciunt nihil numquam quaerat qui quia repudiandae saepe tempore temporibus voluptate voluptates.
            Laudantium, odio, ratione.
        </div>
        <div>Accusantium adipisci aliquid aperiam aut consequatur dolor est eveniet ex facilis illum inventore
            laudantium molestiae, nemo neque odit officiis pariatur perspiciatis quas quasi quia quidem rem tenetur, ut
            veritatis voluptas.
        </div>
        <div>Quidem repellat tenetur ut vero. Accusamus architecto beatae blanditiis commodi corporis, delectus dolorem
            error et eveniet libero magnam, molestiae natus numquam omnis optio, praesentium provident quia ratione
            recusandae repellendus veniam!
        </div>
        <div>Ea, ipsa, maiores. Adipisci animi asperiores at beatae consequuntur debitis, deserunt dolorum ea fuga
            incidunt ipsum minima nobis ratione, sed suscipit tempore unde. Enim facilis incidunt nesciunt non
            obcaecati, quis?
        </div>
        <div>Ad alias aut corporis debitis deserunt, distinctio dolorum est et harum, ipsum iure modi, necessitatibus
            neque nihil nisi non numquam officiis qui quo ratione reprehenderit similique tempore temporibus veritatis
            voluptatem.
        </div>
        <div>Pariatur quam, quibusdam! Animi, consequuntur voluptate. Amet autem beatae blanditiis, eaque enim
            exercitationem placeat quod voluptatem! Aliquam asperiores beatae blanditiis consequuntur ea, eos impedit
            laudantium natus sed sit, voluptatem voluptatibus.
        </div>
        <div>Accusantium, architecto atque culpa deserunt eligendi eos ipsa magnam, minus modi nulla recusandae
            repellendus rerum soluta unde ut velit voluptate! Autem, deleniti labore recusandae sapiente vitae
            voluptates. Ab, dignissimos illum!
        </div>
        <div>Ad amet autem deleniti dolor, fugiat, ipsam iusto nemo non perspiciatis placeat quia, ut voluptatem
            voluptates? Aut, blanditiis, eligendi fugiat illo laborum nemo pariatur quis recusandae reiciendis, sit
            tenetur voluptas.
        </div>
        <div>At commodi consequuntur dolorem, illo maxime sapiente similique suscipit veniam! Asperiores ducimus eius
            eos esse excepturi exercitationem maxime nostrum nulla odio perspiciatis quaerat reprehenderit saepe,
            tempora temporibus velit, veritatis voluptatem.
        </div>
        <div>Architecto aut consectetur corporis eaque nisi perspiciatis reprehenderit tenetur unde. Aperiam at ipsam
            laborum, numquam odio officia officiis reprehenderit? Aut explicabo saepe sed tempora veritatis? Architecto
            enim esse perferendis possimus?
        </div>
        <div>Ab aut enim error facere hic libero omnis perferendis perspiciatis quibusdam velit. Adipisci aspernatur
            assumenda corporis culpa illo itaque libero minus pariatur tenetur vel. Alias aspernatur assumenda dolores
            laboriosam nam?
        </div>
        <div>Fugit similique, voluptates? Architecto dolorem esse eum nostrum quisquam sapiente tempore vel! Amet dicta
            distinctio dolores ea, itaque nam nesciunt nobis quidem sint voluptate! Eligendi error facilis laudantium
            obcaecati voluptates.
        </div>
        <div>Adipisci autem consequatur consequuntur cum debitis deserunt eius enim est illo, ipsum labore modi nam nemo
            nisi numquam ratione repellat saepe sequi similique sint, unde ut, voluptate voluptatem. Assumenda,
            incidunt.
        </div>
        <div>Animi, nostrum quo! Autem iure, quam. A ab assumenda culpa cum cupiditate deleniti doloribus ea et officia
            omnis possimus, provident, recusandae sapiente sed soluta unde voluptates? Distinctio numquam provident
            totam?
        </div>
        <div>Consectetur, consequuntur delectus deserunt dolor eius ex illum, ipsa laudantium nesciunt nisi possimus
            praesentium tempore, temporibus. Aperiam assumenda earum facere fugit harum molestias, officia perspiciatis
            placeat quasi, repellat suscipit vero!
        </div>
        <div>Accusantium amet dolore dolorem ducimus, error, esse eum eveniet excepturi ipsum iste labore praesentium,
            provident quae quam quidem tempore ut veritatis vitae. Beatae esse fugit illo numquam quam quo, reiciendis.
        </div>
        <div>Alias aliquam consectetur dignissimos dolor ducimus ea expedita fugit itaque iusto laudantium minus nobis
            non numquam odio pariatur quasi, quia quis, quo quos reprehenderit rerum saepe sed sunt tenetur voluptate.
        </div>
        <div>Assumenda, blanditiis dignissimos dolor et iste mollitia natus nostrum quod sunt voluptas. Corporis est
            ipsam iusto maiores obcaecati officiis quas ratione sunt ullam? Assumenda aut incidunt neque nobis velit
            voluptas?
        </div>
        <div>Accusantium distinctio eos facilis molestiae neque officia possimus, suscipit voluptatum? Asperiores
            consectetur explicabo facilis incidunt maxime officia reiciendis rem repellendus saepe sequi. Expedita
            reiciendis totam vitae! Esse ipsum nemo numquam.
        </div>
        <div>Alias asperiores assumenda commodi ducimus eius libero, officiis perferendis reprehenderit suscipit
            tempora. Accusantium aliquid error nobis placeat quos. Consequatur iusto minus quia vero? Cupiditate
            distinctio minima odio quos unde! Consectetur!
        </div>
        <div>Accusantium aliquid animi aperiam asperiores atque beatae, corporis cum deleniti error eum ex fugiat hic id
            laudantium, minima molestias mollitia neque nulla perferendis, possimus repellat repellendus sed sint vel
            voluptates.
        </div>
        <div>Accusantium aliquam aperiam asperiores aut debitis dignissimos eius et expedita ipsam labore, magni
            molestiae nam numquam perferendis ratione recusandae soluta tempore temporibus unde veniam? Laudantium
            necessitatibus optio quasi sed voluptates?
        </div>
        <div>Ad assumenda blanditiis cum distinctio dolorem dolorum eaque inventore ipsa ipsum itaque laboriosam magnam
            magni non pariatur perferendis placeat porro quae quibusdam rem repudiandae tenetur ullam vel velit,
            voluptate voluptatem?
        </div>
        <div>Adipisci aspernatur assumenda aut dolorem doloribus ea earum esse et ex fuga fugiat impedit iure labore
            magnam minus, nihil, officia officiis quae quam recusandae reiciendis, sed soluta veniam vitae voluptatem.
        </div>
        <div>Alias amet incidunt ipsam provident quaerat quibusdam vel! Architecto impedit itaque quidem veritatis? Ab
            alias asperiores beatae dignissimos, eligendi et libero molestias mollitia nemo nesciunt officiis quibusdam
            quo, temporibus. Quibusdam.
        </div>
        <div>Enim impedit maxime nesciunt perspiciatis quas sed, sint tempora tenetur veniam vero. Aliquid animi
            asperiores beatae impedit numquam repellat sapiente totam unde voluptatem. Doloremque, earum, quas. Amet
            consectetur eius natus!
        </div>
        <div>Dicta numquam quaerat quam sint voluptatibus. At corporis magnam quidem! Debitis dicta doloremque doloribus
            eius, laborum maxime nihil numquam qui veritatis! A dolor in itaque labore neque officiis tempore velit!
        </div>
        <div>Animi debitis dolorem eos fugit magni maiores minima molestias nihil praesentium quis. Asperiores assumenda
            dolore dolorum ea, explicabo facere fuga hic id illum iste iure, natus pariatur quasi ratione, sequi!
        </div>
        <div>Aperiam aut blanditiis consectetur deleniti dignissimos doloremque eaque eligendi itaque libero, omnis
            quisquam saepe tempore, voluptas! A autem, debitis dicta eos excepturi, iusto officia, saepe sint sit
            tempore temporibus totam!
        </div>
        <div>A amet aut dicta distinctio dolores earum eius esse fugit ipsa ipsum iste iusto magni maiores, minima modi
            nisi obcaecati placeat porro, quam quas quos, ratione saepe sunt temporibus veniam!
        </div>
        <div>Deserunt dignissimos ex tempora unde vel. Delectus expedita harum possimus quos? Adipisci deserunt dolor
            dolorem, eaque nisi quam suscipit. Ab at corporis iure laboriosam non officia, repellendus! Eveniet, non,
            tenetur!
        </div>
        <div>Accusantium fuga magni quisquam quos voluptatem! A accusantium blanditiis consectetur delectus, deserunt
            harum placeat porro quae? Alias architecto, culpa, distinctio ea eligendi eum ex ipsum magni quibusdam ut
            voluptates, voluptatum.
        </div>
        <div>Aliquam blanditiis commodi consequatur consequuntur doloribus, dolorum ea esse eveniet fugit inventore
            itaque labore laudantium libero nesciunt obcaecati, odio quas repellendus rerum saepe soluta tenetur totam
            veniam, voluptatibus. Aspernatur, eaque.
        </div>
        <div>Dicta dignissimos distinctio dolores laboriosam natus sapiente suscipit ut veniam voluptatum. Ad eaque
            earum eos et eum ex ipsam labore molestiae sapiente sed! Cum eum maxime qui quod unde voluptatem.
        </div>
        <div>Doloribus facilis fugit modi possimus recusandae repellendus sapiente, voluptas. Ab animi aspernatur
            doloremque dolores eligendi expedita fugiat fugit illo ipsam magnam magni perspiciatis qui quo, rem sapiente
            similique soluta voluptatum!
        </div>
        <div>Adipisci aliquam consequuntur dolor dolore est ipsa maiores nihil nobis nulla pariatur quae quisquam quos
            recusandae rem repellat repellendus rerum saepe suscipit tenetur, unde ut vel veniam voluptate voluptates
            voluptatum?
        </div>
        <div>Accusamus aspernatur atque autem consectetur cupiditate dolores eligendi fugiat hic in, labore magni minima
            modi molestias necessitatibus nemo nobis non nulla pariatur perspiciatis provident qui, reiciendis tenetur
            veniam voluptas voluptates.
        </div>
        <div>Accusantium adipisci asperiores atque culpa dicta doloribus earum eos error illo molestiae nobis nulla
            numquam officia officiis, perspiciatis, possimus praesentium quia quis recusandae repudiandae tempore
            tenetur ut veniam vitae voluptate.
        </div>
        <div>Aperiam aspernatur aut autem commodi, ex ipsum magni, nemo officia quod similique soluta voluptates.
            Dolore, quibusdam, suscipit! Aspernatur dolorem eligendi error excepturi fugit inventore minus, molestiae
            obcaecati quisquam repudiandae tempora?
        </div>
        <div>Amet aspernatur atque aut consequuntur doloremque eaque error eum facilis fugit id molestiae necessitatibus
            nulla numquam possimus praesentium quia quisquam quo quod ratione repellendus repudiandae sapiente sed ut,
            velit veritatis!
        </div>
        <div>A adipisci animi aspernatur, assumenda consequuntur cumque debitis deserunt, ducimus enim eum eveniet
            excepturi exercitationem facere iusto laudantium maxime nam, nesciunt odio optio quam quibusdam quod
            recusandae saepe suscipit voluptate.
        </div>
        <div>Ab ad aspernatur distinctio dolorem dolorum ducimus enim esse eveniet fuga hic ipsam magnam neque nisi
            pariatur quas quod recusandae sapiente, similique sint sunt tempore velit, vero voluptatem voluptatibus
            voluptatum.
        </div>
        <div>Accusamus alias aperiam assumenda beatae consequuntur corporis dicta distinctio doloribus exercitationem,
            hic iusto obcaecati perspiciatis placeat quia quibusdam quis saepe sed sint sunt tempora. Dicta eveniet
            minima necessitatibus quam rem.
        </div>
        <div>Dolore, maxime, numquam. Consequuntur facilis hic illo minima, neque officiis rem! Accusamus adipisci at
            dolore eaque esse, facere illo incidunt, itaque laborum natus possimus praesentium qui rerum sequi soluta
            voluptatem.
        </div>
        <div>Accusamus accusantium ad aliquam aliquid at blanditiis dolorem esse est eum ex exercitationem fuga fugiat
            inventore ipsum maiores natus qui, quidem quo ratione reiciendis repudiandae rerum sunt tempore voluptate
            voluptatibus.
        </div>
        <div>Deserunt exercitationem, id incidunt labore maxime nam pariatur perspiciatis quas soluta ut! Illum iure
            nesciunt quo quos repellendus tenetur voluptatibus? Animi expedita iure nemo neque non praesentium rem
            soluta voluptatibus.
        </div>
        <div>Ex ipsam itaque modi reprehenderit tempora veritatis, voluptas voluptatem? Ad commodi esse exercitationem
            expedita ipsum itaque magnam magni nam neque, nisi officia provident, quaerat, quo reiciendis sint vitae
            voluptates voluptatibus.
        </div>
        <div>A accusantium amet beatae consequatur consequuntur corporis earum et eum eveniet excepturi facilis illo
            itaque maxime minima modi natus necessitatibus nostrum, optio quae quidem sed velit veritatis vitae
            voluptatibus voluptatum.
        </div>
        <div>Assumenda commodi culpa deserunt eos minima numquam praesentium sint voluptatibus? Ab ad beatae cupiditate
            dolores ducimus eaque fuga, inventore ipsa laborum odio officia possimus quam sequi temporibus totam vitae
            voluptatem!
        </div>
        <div>Aperiam aut consequatur facilis magni modi, quo reprehenderit voluptatem. Architecto dignissimos dolorem,
            ea iure minima modi nesciunt, nostrum quos rem sed sunt veritatis! Dicta fugit, in mollitia quod sunt
            tenetur.
        </div>
        <div>A assumenda aut commodi impedit laudantium magni nihil pariatur quos, vel veniam. Ad alias aliquam atque
            beatae blanditiis deserunt doloremque ducimus illo laborum modi, nisi perferendis provident quos sapiente
            ullam.
        </div>
        <div>Ad aliquam aliquid eius est, et ex fugit harum illum in iste laboriosam minus necessitatibus neque omnis,
            quae quaerat quam qui quia quo recusandae rem repellat repellendus saepe sunt temporibus?
        </div>
        <div>Ab adipisci aspernatur autem consequatur cumque deserunt distinctio dolor dolore dolorem eligendi et eum
            facere illo, in, libero numquam, odit placeat possimus quae quas quidem quisquam sint ullam vitae
            voluptates.
        </div>
    </div>
</body>
</html>